<!DOCTYPE HTML>
<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>LiveInYouth - 聆青</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="Free HTML5 Website Template by FreeHTML5.co" />
	<meta name="keywords" content="free website templates, free html5, free template, free bootstrap, free website template, html5, css3, mobile first, responsive" />
	<!-- 浏览器标签图标 facicon.ico -->
	<link rel="icon" href="/LiveInYouth/favicon.ico" type="image/x-icon" />  
	<!-- //浏览器标签图标 facicon.ico -->
  	<!-- Facebook and Twitter integration -->
	<meta name="twitter:title" content="" />
	<meta name="twitter:image" content="" />
	<meta name="twitter:url" content="" />
	<meta name="twitter:card" content="" />
	<!-- google fonts -->
	<link href='fonts/googleapis-fonts/fonts.css?family=Work+Sans:400,300,600,400italic,700' rel='stylesheet' type='text/css'>
	<!-- Animate.css -->
	<link rel="stylesheet" href="css/animate.css">
	<!-- Icomoon Icon Fonts-->
	<link rel="stylesheet" href="css/icomoon.css">
	<!-- Bootstrap  -->
	<link rel="stylesheet" href="css/bootstrap.css">

	<!-- Magnific Popup -->
	<link rel="stylesheet" href="css/magnific-popup.css">

	<!-- Theme style  -->
	<link rel="stylesheet" href="css/style.css">

	<!-- Modernizr JS -->
	<script src="js/modernizr-2.6.2.min.js"></script>
	<!-- FOR IE9 below -->
	<!--[if lt IE 9]>
	<script src="js/respond.min.js"></script>
	<![endif]-->
	
	</head>
	
	<!-- 发现音乐模块 -->
	<body>
		
	<div class="fh5co-loader"></div>
	
	<div id="page">
	<!-- 不是原生的bootstrap导航栏，是freeHtml5.co的框架，但挺相似的 -->
	<nav class="fh5co-nav" role="navigation">
		<div class="container">
			<div class="row">
				<div class="col-xs-2">
					<div id="fh5co-logo"><a href="main.html">LiveInYouth.</a></div>
				</div>
				<!-- bootstrap响应式网格布局 -->
				<div class="col-xs-10 text-right menu-1">
					<!-- 无序列表 -->
					<ul>
						<!-- active类所在的列表元素会加亮强调 -->
						<li class="active"><a href="main.html">发现音乐</a></li>
						<li><a href="work.html">发现歌单</a></li>
						<!-- 砍掉发现故事
						<li><a href="story.html">发现故事</a></li>
						 -->
						<li><a href="fm.html">私人电台</a></li>
						<li>
						<!-- <li class="has-dropdown active"> -->
							<a href="services.html">我的聆青</a>
							<!-- 暂时砍掉
							<ul class="dropdown">
								<li><a href="#">个人主页</a></li>
								<li><a href="#">我的歌单</a></li>
								<li><a href="#">我的故事</a></li>
								<li><a href="#">退出登录</a></li>
							</ul>
							 -->
						</li>
						<li><a href="about.html">关于聆青</a></li>
					</ul>
				</div>
			</div>
		</div>
	</nav>
	<!-- 头面背景 -->
	<header id="fh5co-header" class="fh5co-cover" role="banner" style="background-image:url(images/img_bg_1.jpg);">
		<div class="overlay"></div>
		<div class="container">
			<div class="row">
				<div class="col-md-10 col-md-offset-1 text-center">
					<div class="display-t">
						<div class="display-tc animate-box" data-animate-effect="fadeIn">
							<h1>发现音乐</h1>
							<h2>Discover <a href="#" target="_blank">Music</a></h2>
							<!-- 跳转关于页面 -->
							<!-- <p><a href="about.html" class="btn btn-default">聆青</a></p> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</header>
	
	<!-- soleMv独家MV模块 -->
	<div class="container">
		<div class="row">
			<div id="fh5co-section">
				<!-- 三个learn more -->
				<div class="col-nineth">
					<!-- 把三个learn more定在一行，一般是为了方便css -->
					<div class="row">
					<h1>独家MV</h1>
					<!-- a标签变绿色 -->
					<p><a id="soleMvTitle"><!-- 范晓萱最新单曲《放空》 --></a></p><br><br><br>
						<!-- 三个learn more -->
						<div class="col-third">
							<div class="col-md-12">
								<!-- 评论上的图标 -->
								<span class="icon">
									<i class="icon-eye"></i>
								</span>
								<div class="desc soleMvComment">
									<h3 class="soleMvCommentUser"><!-- 御坂姐 --></h3>
									<p class="soleMvCommentContent"><!-- 只要她还肯露面，只要她还肯唱歌，只要她开心，她怎样都行。 --></p>
									<p class="soleMvCommentTu"><a href="#" class="btn btn-primary">❤</a></p><!-- 赞 -->
								</div>
							</div>
						</div>
						<div class="col-third">
							<div class="col-md-12">
								<span class="icon">
									<!-- <i class="icon-power"></i> -->
									<i class="icon-eye"></i>
								</span>
								<div class="desc soleMvComment">
									<h3 class="soleMvCommentUser"><!-- 闭上眼的另一个故事 --></h3>
									<p class="soleMvCommentContent"><!-- 放空 感同身受 有时候觉得融不进大家 觉得好难受 会一瞬间抽离 这是什么病？ 快乐到一半刹住 觉得空洞洞的 --></p>
									<p class="soleMvCommentTu"><a href="#" class="btn btn-primary">❤</a></p><!-- 赞 -->
								</div>
							</div>
						</div>
						<div class="col-third">
							<div class="col-md-12">
								<span class="icon">
									<!-- <i class="icon-laptop"></i> -->
									<i class="icon-eye"></i>
								</span>
								<div class="desc soleMvComment">
									<h3 class="soleMvCommentUser"><!--Allen --></h3>
									<p class="soleMvCommentContent"><!--属于范晓萱迷幻的味道，像是喝了杯红酒有些微醺，慢慢的放空自己。 --></p>
									<p class="soleMvCommentTu"><a href="#" class="btn btn-primary">❤</a></p><!-- 赞 -->
								</div>
							</div>
						</div>
					</div>
				</div>
				
				<!-- 
				<div id="soleMvBg" class="col-forth fh5co-video fh5co-bg" style="background-image: url(images/image_1.jpg)">
					<a id="soleMvSrc" href="/LiveInYouth/video/mp4/范晓萱-放空.mp4" class="popup-vimeo"><i class="icon-video2"></i></a>
						<div class="overlay"></div>
				</div>Video模块 -->
				
				<!-- Video模块 -->
				<div id="soleMvBg" class="col-forth fh5co-video fh5co-bg" style="">
					<a id="soleMvSrc" href="" class="popup-vimeo"><i class="icon-video2"></i></a>
						<div class="overlay"></div>
				</div>
			</div>
		</div>
	</div>
    <!-- //soleMv独家MV模块 -->

	<!-- hitSong热门单曲模块 -->
	<div class="fh5co-bg-section">
		<div class="container">
			<div class="row">
				<div id="fh5co-features-2">
					<div class="col-feature-9">
						<div class="row">
							<!-- 标题 -->
							<div class="col-md-12 fh5co-heading animate-box">
								<h2>LiveInYouth热门</h2>
								<p id="hitSongTitle"><!-- 4月热门 --></p>
							</div>
							<!-- //标题 -->
						</div>
						<div class="row">
							<!-- 左侧展示图，第一首歌onplay自动加载，其余两首onplaying加载 -->
							<div class="col-md-7 col-sm-7 col-md-pull-2 col-sm-pull-2 animate-box" data-animate-effect="fadeInRight">
								<div class="feature-image">
									<img class="albumImgSrc" src="" alt="albumImg"><!-- /LiveInYouth/images/hitSong/albumImg/work_1B.png -->
								</div>
							</div>
							<!-- //左侧展示图 -->
							<!-- 单曲简介和播放模块 -->
							<div class="col-md-5 col-sm-5">
								<div class="feature-left animate-box" data-animate-effect="fadeInLeft">
									<span class="icon">
										<i class="icon-check"></i>
									</span>
									<div class="feature-copy hitSole">
										<h3 class="hitSoleTitle"><!-- 放空 --></h3>
										<!-- 使用html5的audio标签来嵌入音乐，利用浏览器的实现 -->
										<audio class="hitSoleSrc" src="" controls="controls"></audio>
										<!-- 歌曲最热评论 -->
										<p class="hitSoleCmt"><!-- 我不愿意去触碰那些我不喜欢的身体，回应毫无感觉的词句，去拥抱那些我未为之心动过的灵魂 --></p>
									</div>
								</div>

								<div class="feature-left animate-box" data-animate-effect="fadeInLeft">
									<span class="icon">
										<i class="icon-check"></i>
									</span>
									<div class="feature-copy hitSole">
										<h3 class="hitSoleTitle"><!-- 虚拟 --></h3>
										<audio class="hitSoleSrc" src="" controls="controls"></audio>
										<p class="hitSoleCmt"><!-- 你是我朝夕相伴触手可及的虚拟 你是我未曾拥有无法捕捉的亲昵 --></p>
									</div>
								</div>

								<div class="feature-left animate-box" data-animate-effect="fadeInLeft">
									<span class="icon">
										<i class="icon-check"></i>
									</span>
									<div class="feature-copy hitSole">
										<h3 class="hitSoleTitle"><!-- 落花流水 --></h3>
										<audio class="hitSoleSrc" src="" controls="controls"></audio>
										<p class="hitSoleCmt"><!-- 流水很清楚 惜花这个责任 真的身份不过送运 这趟旅行若算开心 亦是无负这一生 --></p>
									</div>
								</div>
							</div>
							<!-- //单曲简介和播放模块 -->
						</div>
					</div>
					
					<!-- 右侧统计栏 -->
					<div class="col-feature-3">
						<div id="fh5co-counter" class="fh5co-bg fh5co-counter">
							<div class="row">
								<div class="display-t">
									<div class="display-tc">
										<div class="col-md-12 animate-box">
											<div class="feature-center">
												<span id="clickCount" class="counter js-counter" data-from="0" data-to="404" data-speed="5000" data-refresh-interval="50">1</span>
												<span class="counter-label">点击量</span>
											</div>
										</div>
										<div class="col-md-12 animate-box">
											<div class="feature-center">
												<span id="cmtCount" class="counter js-counter" data-from="0" data-to="404" data-speed="5000" data-refresh-interval="50">1</span>
												<span class="counter-label">评论数</span>
											</div>
										</div>
										<div class="col-md-12 animate-box">
											<div class="feature-center">
												<span id="viaCount" class="counter js-counter" data-from="0" data-to="404" data-speed="5000" data-refresh-interval="50">1</span>
												<span class="counter-label">收藏量</span>
											</div>
										</div>
										<div class="col-md-12 animate-box">
											<div class="feature-center">
												<span id="thumpCount" class="counter js-counter" data-from="0" data-to="1" data-speed="5000" data-refresh-interval="50">1</span>
												<span class="counter-label">点赞数</span>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- //右侧统计栏 -->
				</div>
			</div>
		</div>
	</div>
	<!-- //hitSong热门单曲模块 -->
	
	<!-- hitSong热门详情模块 -->
	<!-- 砍掉
	<div id="fh5co-portfolio">
		<div class="container">
			<div class="row animate-box">
				<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
					<h2>虚拟</h2>
					<p>你是我朝夕相伴触手可及的虚拟 你是我未曾拥有无法捕捉的亲昵</p>
				</div>
			</div>
			<div class="row">
				<div class="project">
					<div class="col-md-8 col-md-push-5 animate-box" data-animate-effect="fadeInLeft">
						<img class="img-responsive" src="/LiveInYouth/images/hitSong/albumImg/work_1F.png" alt="work">
					</div>
					<div class="col-md-4 col-md-pull-8 animate-box" data-animate-effect="fadeInRight">
						<div class="mt">
							<h3>Real Project For Real Solutions</h3>
							<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. </p>
							<ul class="list-nav">
								<li><i class="icon-check"></i>Far far away, behind the word</li>
								<li><i class="icon-check"></i>There live the blind texts</li>
								<li><i class="icon-check"></i>Separated they live in bookmarksgrove</li>
								<li><i class="icon-check"></i>Semantics a large language ocean</li>
								<li><i class="icon-check"></i>A small river named Duden</li>
							</ul>
						</div>
					</div>
				</div>
				
				<div class="project">
					<div class="col-md-8 col-md-pull-1 animate-box" data-animate-effect="fadeInLeft">
						<img class="img-responsive" src="/LiveInYouth/images/hitSong/albumImg/work_1C.png" alt="work">
					</div>
					<div class="col-md-4 animate-box" data-animate-effect="fadeInRight">
						<div class="mt">
							<div>
								<h4><i class="icon-user"></i>Real Project For Real Solutions</h4>
								<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
							</div>
							<div>
								<h4><i class="icon-video2"></i>Real Project For Real Solutions</h4>
								<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
							</div>
							<div>
								<h4><i class="icon-shield"></i>Real Project For Real Solutions</h4>
								<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. </p>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>	 -->
	<!-- //hitSong热门详情模块 -->
	
	<!-- hitCmt热门评论模块 -->
	<div id="fh5co-testimonial">
		<div class="container">
			<div class="row animate-box">
				<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
					<h2>LiveInYouth 热评</h2>
				</div>
			</div>
			<div class="row">
				<div class="col-md-4 animate-box">
					<div class="testimony">
						<blockquote>
							<!-- &ldquo;Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius&rdquo;
							 -->
						</blockquote>
						<p class="author"><cite><!-- John Doe --></cite></p>
					</div>
				</div>
				<div class="col-md-4 animate-box">
					<div class="testimony">
						<blockquote>
							<!-- &ldquo;Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius&rdquo;
							 -->
						</blockquote>
						<p class="author"><cite><!-- Rob Smith --></cite></p>
					</div>
				</div>
				<div class="col-md-4 animate-box">
					<div class="testimony">
						<blockquote>
							<!-- &ldquo;Dignissimos asperiores vitae velit veniam totam fuga molestias accusamus alias autem provident. Odit ab aliquam dolor eius&rdquo;
							 -->
						</blockquote>
						<p class="author"><cite><!-- Jane Doe --></cite></p>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- //hitCmt热门评论模块 -->
	
	<!-- subscribe订阅模块 -->
	<div id="fh5co-started">
		<div class="container">
			<div class="row animate-box">
				<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
					<h2>订阅我们</h2>
					<p>欢迎订阅聆青 获取专属于你的感官世界</p>
				</div>
			</div>
			<div class="row animate-box">
				<!-- 已登录时 -->
				<div id="loginSubs" class="col-md-8 col-md-offset-4 hidden">
					<form class="form-inline">
						<!-- 
						<div class="col-md-6 col-sm-6">
							<div class="form-group">
								<label for="email" class="sr-only">Email</label>
								<input type="email" class="form-control" id="email" placeholder="Email">
							</div>
						</div> 
						-->
						<div class="col-md-6 col-sm-6">
							<button id="subs" type="button" class="btn btn-default btn-block">订阅</button>
						</div>
					</form>
				</div>
				<!-- //已登录时 -->
				<!-- 已登录并订阅 -->
				<div id="hasSubs" class="col-md-8 col-md-offset-4 hidden">
					<form class="form-inline">
						<!-- 
						<div class="col-md-6 col-sm-6">
							<div class="form-group">
								<label for="email" class="sr-only">Email</label>
								<input type="email" class="form-control" id="email" placeholder="Email">
							</div>
						</div> 
						-->
						<div class="col-md-6 col-sm-6">
							<!-- 已订阅，disabled使其默认不可点击 -->
							<button disabled="disabled" type="button" class="btn btn-default btn-block">已订阅</button>
						</div>
					</form>
				</div>
				<!-- //已登录并订阅 -->
				<!-- 未登录时 -->
				<div id="notLoginSubs" class="col-md-8 col-md-offset-4">
					<form class="form-inline">
						<!-- 
						<div class="col-md-6 col-sm-6">
							<div class="form-group">
								<label for="email" class="sr-only">Email</label>
								<input type="email" class="form-control" id="email" placeholder="Email">
							</div>
						</div>
						-->
						<div class="col-md-6 col-sm-6">
							<button id="registSubs" type="button" class="btn btn-default btn-block">点击登录</button>
						</div>
					</form>
				</div>
				<!-- //未登录时 -->
			</div>
		</div>
	</div>
	<!-- //subscribe订阅模块 -->
	
	<!-- 底部 -->
	<footer id="fh5co-footer" role="contentinfo">
		<div class="container">
			<div class="row row-pb-md">
				<div class="col-md-4 fh5co-widget">
					<h3>LiveInYouth - 聆青</h3>
					<p>历经青年互动科技有限公司是一个新型的互联网公司，它通过一个泛社区化的感觉分享网站——聆青网，专注于向15-30岁的青年以及30-50岁的泛青年群体提供一个感觉分享的互联网平台。</p>
					<p><a href="/LiveInYouth/main/about.html">关于 聆青</a></p>
				</div>
				<div class="col-md-2 col-sm-4 col-xs-6 col-md-push-1">
					<ul class="fh5co-footer-links">
						<li><a href="http://www.w3school.com.cn">W3School</a></li>
						<li><a href="http://www.runoob.com/">Runoob</a></li>
						<li><a href="http://www.iteye.com/">ITeye</a></li>
						<li><a href="http://www.jb51.net/">Jb51</a></li>
						<li><a href="http://freehtml5.co">FreeHtml5</a></li>
					</ul>
				</div>

				<div class="col-md-2 col-sm-4 col-xs-6 col-md-push-1">
					<ul class="fh5co-footer-links">
						<li><a href="https://leetcode.com/">LeetCode</a></li>
						<li><a href="http://stackoverflow.com/">StackOverFlow</a></li>
						<li><a href="https://www.v2ex.com/">v2ex</a></li>
						<li><a href="https://git.oschina.net/">OsChina</a></li>
					</ul>
				</div>

				<div class="col-md-2 col-sm-4 col-xs-6 col-md-push-1">
					<ul class="fh5co-footer-links">
						<li><a href="http://weibo.com/ixenos">Weibo</a></li>
						<li><a href="http://www.cnblogs.com/ixenos/">Cnblogs</a></li>
						<li><a href="https://www.zhihu.com/people/ixenos/">Zhihu</a></li>
						<li><a href="https://github.com/ixenos">GitHub</a></li>
					</ul>
				</div>
			</div>

			<div class="row copyright">
				<div class="col-md-12 text-center">
					<p>
						<small class="block">&copy; 2017 LiveInYouth. All Rights Reserved.</small><br />
						<a href="http://github.com/ixenos/" target="_blank">历经青年公司</a> 版权所有 
					</p>
				</div>
			</div>

		</div>
	</footer>
	<!-- //底部 -->
	</div>
	
	<!-- 返回顶部按钮 -->
	<div class="gototop js-top">
		<a href="#" class="js-gotop"><i class="icon-arrow-up"></i></a>
	</div>
	<!-- //返回顶部按钮 -->
	
	<!-- jQuery -->
	<script src="js/jquery.min.js"></script>
	<!-- jQuery Easing -->
	<script src="js/jquery.easing.1.3.js"></script>
	<!-- Bootstrap -->
	<script src="js/bootstrap.min.js"></script>
	<!-- Waypoints滚动监听 -->
	<script src="js/jquery.waypoints.min.js"></script>
	<!-- countTo数值计数展示 -->
	<script src="js/jquery.countTo.js"></script>
	<!-- Magnific Popup页面级别的弹窗 -->
	<script src="js/jquery.magnific-popup.min.js"></script>
	<script src="js/magnific-popup-options.js"></script>
	<!-- Main -->
	<script src="js/main.js"></script>
	
	<!-- 独家MV模块js -->
	<script type="text/javascript">
	$(function(){
		var url = "/LiveInYouth/DiscoverMusic";
		//指定服务类型
		//var type = "soleMv";
		$.ajax({
			cache : true , //具有幂等性的GET才能使用cache，POST不符合幂等性，所以cache没有意义
			type : "GET",
			url : url,
			data : "type=soleMv", 
			async : true,
			success : function(data) {
				/*
					要建这么个业务对象，使用jackson转bean为json字符串，或者手动map
					
					comment对象可复用，考虑一下呗，手动拼太累。ok
					
					再把json设计得通用一点，让普通的歌也能用，不止MV
					
					//这部分数据应该作为一个上下文属性保存，而且应该放在配置文件中以方便修改(Properties类)
					//可以开发一个设置的后台，对独家MV配置文件进行配置，启动后自动读取，set为上下文属性
				*/
				if(data.updated == "true"){
					/*
						jq填充soleMvTitle的文本内容，用text
					*/
					$("#soleMvTitle").text(data.soleMvTitle);
					
					/*
						填充三条评论位置
					*/
					var thumpUpUrl = "/LiveInYouth/Comment?thumpUp=1&commentId=";
					//一定要用this来指定当前遍历到的元素
					$("div[class='desc soleMvComment']").each(function(i){
						$(this).children(".soleMvCommentUser").text(data.simpleCmts[i].userName);//填充用户名
						$(this).children(".soleMvCommentContent").text("“" + data.simpleCmts[i].content + "”");//填充用户评论
						//填充评论的赞地址
						$(this).children(".soleMvCommentTu").children("a").attr("href", thumpUpUrl + data.simpleCmts[i].commentId);
					})
					
					thumpUp();//点赞独立处理函数（将获取上面赋过值的）
					
					/*
						填充video位置
					*/
					$("#soleMvBg").attr("style", "background-image: url("+ data.bannerSrc +")");//mv背景
					$("#soleMvSrc").attr("href", data.songSrc);//mv源
				}
			}
		});
	});
	</script>
	<!-- //独家MV模块js -->

	<!-- 点赞独立处理js -->
	<script type="text/javascript">
	/*
		这个点赞处理还有点简陋，如果要实现 订阅模块 那种不可选状态，那么要把a修改为button，更改独家mv模块对a的href赋值，TODO 以后再说
	*/
	function thumpUp(){
		/*
			取消get的默认跳转
		*/
		$("div[class='desc soleMvComment']").each(function(i){
			var anchor = $(this).children(".soleMvCommentTu").children("a");//取锚点
			var href = anchor.attr("href");//填充评论的赞地址
			/*
				点击事件定制
				//TODO bug:刷新可再次点赞,用localStorage来存储？算不算浪费？
			*/
			var flag = true;//点赞次数限制标志，顺便做强制刷新的盲锚点（页面找不到，则跳转当前位置） 
			$(anchor).click(function(event){
				var loginFlag = Cookies.get("userName");
				if(loginFlag == undefined){
					event.preventDefault();//禁止click默认事件
					if(window.confirm("请登录后再点赞，是否进行登录？")){
						window.location = "/LiveInYouth";
					}
				}else{
					if(flag){
						$.get(href, function(){//$.get是ajax的，而且会禁止默认跳转，但自己又进行跳转
							//禁止默认跳转
							alert("点赞成功");
							window.location.href = "/LiveInYouth/main/main.html#" + flag;//点赞后保持在当前位置,后面是什么不重要，只要是当前元素的元素就好
							flag = false;//限制当前点赞次数，最重要还是要在后台限制（弄一个赞表？）
						});
					}else{
						//禁止默认跳转
						event.preventDefault();
						alert("已点赞");
						window.location.href = "/LiveInYouth/main/main.html#" + flag;//点赞后保持在当前位置,后面是什么不重要，只要是当前元素的元素就好
					}
				}
			});
		})
	}
	</script>
	<!-- 点赞独立处理js -->

	<!-- 热门单曲模块js -->
	<script type="text/javascript">
	$(function(){
		var url = "/LiveInYouth/DiscoverMusic";
		$.ajax({
			cache : true , //具有幂等性的GET才能使用cache，POST不符合幂等性，所以cache没有意义
			type : "GET",
			url : url,
			data : "type=hitSong", //指定服务类型
			async : true,
			success : function(data) {
				if(data.updated == "true"){
					/*
						填充hitSongTitle的文本内容，用text
					*/
					$("#hitSongTitle").text(data.hitSongTitle);
					/*
						填充三首热歌的位置
					*/
					$("div[class='feature-copy hitSole']").each(function(i){//一定要用this来指定当前遍历到的元素
						$(this).children(".hitSoleTitle").text(data.hitSongs[i].songName);//填充歌名
						$(this).children(".hitSoleCmt").text(data.hitSongs[i].hitCmt);//填充热评
						var audioTag = $(this).children(".hitSoleSrc");//当前audio标签的jq对象
						audioTag.attr("src", data.hitSongs[i].songSrc);//填充音乐源
						/*
							绑定播放就绪事件和播放事件（左侧图片栏、右侧统计栏）
							
							统计栏依赖jQuery.countTo.js，具体用法见：https://github.com/mhuggins/jquery-countTo
						*/
						var realAudioTag = audioTag.get(0); // 通过jq对象获取js对象
						if(i==0){
							/*
								默认加载第一首歌
								
								canplay会一直顶着吗？不会，因为图片能改变；那我们的data-to属性也改变了，所以应该是：
								countTo对data-to有缓存，不读取最新的
							*/
							realAudioTag.addEventListener("canplay", function(){
								//填充左侧图
								$("div[class='feature-image']").children(".albumImgSrc").attr("src", data.hitSongs[i].albumImgSrc);
								//填充右侧数据（countTo的初始数据，countTo读取一次就不再读取，而是自有缓存，所以要更改时应去更改countTo的）
								//初始化属性，说明必须要有初值，即使不显示，所以在上面补回去
								$("#clickCount").attr("data-to", data.hitSongs[i].clickCount);
								$("#cmtCount").attr("data-to", data.hitSongs[i].cmtCount);
								$("#viaCount").attr("data-to", data.hitSongs[i].viaCount);
								$("#thumpCount").attr("data-to", data.hitSongs[i].thumpCount);
								//初始化countTo，保证在更新
								$('#clickCount').countTo({from: 0, to: data.hitSongs[i].clickCount});
								$('#cmtCount').countTo({from: 0, to: data.hitSongs[i].cmtCount});
								$('#viaCount').countTo({from: 0, to: data.hitSongs[i].viaCount});
								$('#thumpCount').countTo({from: 0, to: data.hitSongs[i].thumpCount});
							});
							
							/*
								重新点击第一首歌时
							*/
							realAudioTag.addEventListener("playing", function(){
								//让其他的暂停
								$("div[class='feature-copy hitSole']").each(function(x){
									if(x!=i){
										var realAudioTag = $(this).children(".hitSoleSrc").get(0);//由jq对象获取js对象
										realAudioTag.pause();//暂停								
									}
								});
							
								//填充左侧图,页面自动替换，没有动画效果
								$("div[class='feature-image']").children(".albumImgSrc").attr("src", data.hitSongs[i].albumImgSrc);
								//填充右侧数据
								//这里是初始化countTo的参数，而不是去设置标签的属性
								$('#clickCount').countTo({from: 0, to: data.hitSongs[i].clickCount});
								$('#cmtCount').countTo({from: 0, to: data.hitSongs[i].cmtCount});
								$('#viaCount').countTo({from: 0, to: data.hitSongs[i].viaCount});
								$('#thumpCount').countTo({from: 0, to: data.hitSongs[i].thumpCount});
								//countTo重新count起来……
								$('#clickCount').countTo('restart');
								$('#cmtCount').countTo('restart');
								$('#viaCount').countTo('restart');
								$('#thumpCount').countTo('restart');
							
							});
						}else{
							/*
								其他两首歌，在播放时自动加载数据并刷新
							*/
							realAudioTag.addEventListener("playing", function(){
								//让其他的暂停
								$("div[class='feature-copy hitSole']").each(function(x){
									if(x!=i){
										var realAudioTag = $(this).children(".hitSoleSrc").get(0);//由jq对象获取js对象
										realAudioTag.pause();//暂停							
									}
								});
								
								//填充左侧图,页面自动替换，没有动画效果
								$("div[class='feature-image']").children(".albumImgSrc").attr("src", data.hitSongs[i].albumImgSrc);
								//填充右侧数据
								//这里是初始化countTo的参数，而不是去设置标签的属性
								$('#clickCount').countTo({from: 0, to: data.hitSongs[i].clickCount});
								$('#cmtCount').countTo({from: 0, to: data.hitSongs[i].cmtCount});
								$('#viaCount').countTo({from: 0, to: data.hitSongs[i].viaCount});
								$('#thumpCount').countTo({from: 0, to: data.hitSongs[i].thumpCount});
								//countTo重新count起来……
								$('#clickCount').countTo('restart');//restart里面是 stop、init、start，init清零，但是初始数据另外有？
								$('#cmtCount').countTo('restart');
								$('#viaCount').countTo('restart');
								$('#thumpCount').countTo('restart');
								
							});
						}
					});
				}
			}
		});
	});
	</script>
	<!-- //热门单曲模块js -->
	
	<!-- 热门评论模块js -->
	<script type="text/javascript">
	$(function(){
		var url = "/LiveInYouth/DiscoverMusic";
		$.ajax({
			cache : false , //开启缓存，下个ajax会从缓存中读数据，除非url重写（cache:false就是给url加上时间戳来不缓存请求的）
			type : "GET", //具有幂等性的GET才能使用cache，POST不符合幂等性，所以cache没有意义
			url : url,
			data : "type=hitCmt", //指定服务类型
			async : true,
			success : function(data) {
				if(data.updated == "true"){
					$("div[class='testimony']").each(function(i){
						$(this).children('blockquote').text("“" +data.simpleCmts[i].content + "”");
						$(this).children('.author').children('cite').text(data.simpleCmts[i].userName + " to 《" + data.simpleCmts[i].songName + "》");
					});
				}else{
					alert("热评提取失败"); //TODO
				}
			}
		});
		
	});
	</script>
	<!-- //热门评论模块js -->	

	<!-- 订阅模块js -->
	<!-- 改用原生的js.cookie库，不用jq.cookie -->
	<script src="/LiveInYouth/util/js/cookie/js.cookie-2.1.4.min.js"></script>
	<script type="text/javascript">
	$(function(){
		//三个部分
		var loginSubs = document.getElementById("loginSubs");
		var registSubs = document.getElementById("registSubs");
		var hasSubs = document.getElementById("hasSubs");

		//取不到JSESSIONID只是说明没有自动登录，而取不到userName才可以代表没有登录
		var loginFlag = Cookies.get("userName");
		if(loginFlag == undefined){
			/*
				未登录时，点击登录并订阅时，跳转登录页面的登录页面,TODO:在login根据参数的提示跳转mian的订阅部分
			*/
			registSubs.addEventListener("click", function(){
				//在URL即传参又设置锚点:XXXX?id=XX&number=YY#zz
				window.location = "/LiveInYouth";//跳转登录注册页面
			});
		}else{
			/*
				已登录时，显示订阅，隐藏登录并订阅
			*/
			loginSubs.classList.remove("hidden");//显示订阅
			registSubs.classList.add("hidden");//隐藏登录并订阅
			
			/*
				已登录时，自动ajax查询是否已订阅，已订阅显示不可选的已订阅按钮
			*/
			var url = "/LiveInYouth/Subscribe";
			$.ajax({
				cache : false , //开启缓存，下个ajax会从缓存中读数据，除非url重写（cache:false就是给url加上时间戳来不缓存请求的）
				type : "GET", //具有幂等性的GET才能使用cache，POST不符合幂等性，所以cache没有意义
				url : url,
				data : "type=ifSubs", //指定服务类型：是否订阅
				async : true,
				success : function(data) {
					if(data.success=="false" ){
						if(data.type=="hasSubs"){
							//标签变成已订阅，且不可选
							loginSubs.classList.add("hidden");//隐藏订阅
							hasSubs.classList.remove("hidden");//显示已订阅（已禁止button事件）
						}
						if(data.type=="notSubs"){
							//do nothing
							//alert("未订阅");
						}
						if(data.type=="sessionNull"){
							alert("后台会话已关闭，请重新登录");
							
							//完全删除username这个cookie，指定path（在哪获得的，path就在哪）
							Cookies.remove("userName", {path:"/LiveInYouth"});
							
							loginSubs.classList.add("hidden");//显示订阅
							registSubs.classList.remove("hidden");//隐藏登录并订阅
						}
					}
				}
			});
			
			/*
				已登录时，点击订阅按钮，订阅后显示不可选的已订阅按钮
			*/
			var subsBtn = document.getElementById("subs");
			subsBtn.addEventListener("click", function(event){
				//点击订阅时，dao设置用户标志
				var url = "/LiveInYouth/Subscribe";
				$.ajax({
					cache : false , //开启缓存，下个ajax会从缓存中读数据，除非url重写（cache:false就是给url加上时间戳来不缓存请求的）
				type : "GET", //具有幂等性的GET才能使用cache，POST不符合幂等性，所以cache没有意义
					url : url,
					data : "type=subs", //指定服务类型：订阅
					async : true,
					success : function(data) {
						if(data.success == "true"){
							alert("订阅成功");
							//标签变成已订阅，且不可选 
							loginSubs.classList.add("hidden");//隐藏订阅
							hasSubs.classList.remove("hidden");//显示已订阅（已禁止button事件）
						}else if(data.success == "false"){
							if(data.type == "hasSubs"){
								//标签变成已订阅，且不可选
								loginSubs.classList.add("hidden");//隐藏订阅
								hasSubs.classList.remove("hidden");//显示已订阅（已禁止button事件）
							}
							if(data.type == "updateDao"){
								alert("dao更新失败");
							}
							if(data.type == "selectDao"){
								alert("dao查询失败");
							}
						}else{
							alert("订阅失败");
						}
					}
				});
				
				return false;//禁止type="button"的默认事件，不会进行跳转
			});
		}
	});
	</script>
	<!-- //订阅模块js -->
	
	</body>
</html>

